<template>
    <div>
        <!-- 票据领用 -->
        <div class="container">
            <!-- 标题栏 -->
            <el-row>
                <el-col :span="24" class="ticket-title">票据库</el-col>
            </el-row>
            <!-- 表格功能栏 -->
            <el-row class="fun-container">
                <el-col :span="24">
                    <div class="table-fun lf">
                        <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="refresh">刷新</div>
                    </div>
                    <el-select v-model="ticketType" placeholder="" class="lf" style="width:100px" size="mini">
                        <el-option v-for="item of ticketTypeList" :label="item.key" :value="item.value"></el-option>
                    </el-select>
                    <el-select v-model="isGet" placeholder="" class="lf get-select" style="width:100px" size="mini">
                        <el-option label="不限" value=""></el-option>
                        <el-option label="未领完" value="0"></el-option>
                        <el-option label="已领完" value="1"></el-option>
                    </el-select>
                </el-col>
            </el-row>
            <!-- 表格栏 -->
            <avue-crud :data="ticUseTable.data" :option="ticUseTable.option" class="ticGet-table" :page="ticUseTable.page" @current-change="tickRowII"  @current-row-change="tickRoww"></avue-crud>
            <!-- tag栏 -->
            <el-row class="tag-container">
                <el-col :span="24">
                    <el-tabs v-model="ticActive">
                        <el-tab-pane label="票据领用" name="first">
                            <!-- 表格菜单栏 -->
                            <el-row>
                                <el-col :span="24" class="table-fun">
                                    <img src="../../assets/imgs/operation_icon_shuaxin_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="refreshII">刷新</div>
                                    <img src="../../assets/imgs/operation_icon_tianjia_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="addShow">票据入库</div>
                                    <img src="../../assets/imgs/operation_icon_shanchu_default.png" alt="" class="lf"><div class="lf choose-title fun-text" @click="outKu">票据回收</div>
                                    <div class="lf choose-title">领用人筛选</div>
                                    <el-autocomplete
                                    class="inline-input lf"
                                    v-model="userChoose" size="mini" style="width:150px;"
                                    :fetch-suggestions="querySearch"
                                    placeholder="请输入内容"
                                    ></el-autocomplete>
                                </el-col>
                            </el-row>
                            <!-- 表格栏 -->
                            <avue-crud :data="ticGetTable.data" :option="ticGetTable.option" :page="ticGetTable.page" @current-change="tickRow"  @current-row-change="rowChange"></avue-crud>
                        </el-tab-pane>
                        <el-tab-pane label="未领用票段" name="second">
                            <avue-crud :data="ungetList.data" :option="ungetList.option" :page="ungetList.page"></avue-crud>
                        </el-tab-pane>
                    </el-tabs>
                </el-col>
            </el-row>
            <!-- 添加弹窗 -->
            <div class="modal-win" v-show="addWin">
                <el-row>
                    <el-col :span="24">
                    <img src="../../assets/imgs/operation_bg_biaoti_default.png" alt="" class="lf modal-img">
                    <div class="lf modal-title">添加</div>
                    <div class="rf close" @click="closeModual">X</div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <avue-form v-model="addForm" :option="addOption" class="yz-form"></avue-form>
                        <button class="check-btn rf" @click="closeModual"><img src="../../assets/imgs/operation_btn_icon_quxiao_default.png" alt="" class="btn-img">取消</button>
                        <button class="check-btn rf" @click="inKu(addForm)"><img src="../../assets/imgs/operation_btn_icon_tijiao_default.png" alt="" class="btn-img">确定</button>
                    </el-col>
                </el-row>
                
            </div>
        </div>
    </div>
</template>

<script>
import qs from "qs";
import FormData from "../../components/common/form"
import TableData from "../../components/common/tableData"
const DIC={
    ticketTypeList:[],
    shuUser:[]
}
export default {
  data: function() {
    return {
        ticketTypeList:[],
        ticketType:"",
        isGet:"",
        shuUser:[],
        ticGetTable:{
            page: {
              pageSizes: [4],
              total: 20,
              currentPage: 1,
              pageSize: 4,
            },
            data:[],
            option:{
                highlightCurrentRow:true,
                page:true,
                index:true,
                align:'center',
                menu:false,
                menuAlign:'center',
                column:[
                    {
                      label:"批次号",
                      prop:"batch_no" 
                    },
                    {
                      label:"票段起始号",
                      prop:"begin_no" 
                    },
                    {
                      label:"票段结束号",
                      prop:"end_no" 
                    },
                    {
                      label:"票据剩余",
                      prop:"counts" 
                    },
                    {
                      label:"票据类型",
                      prop:"type" 
                    },
                ]
            }
        },
        ticActive:"first",
        userChoose:"",
        currentRow:"",
        currentTicRow:"",
        ticUseTable:{
            page: {
                pageSizes: [2],
                total: 20,
                currentPage: 1,
                pageSize: 10,
            },
            data:[],
            option:{
                page:true,
                align:'center',
                highlightCurrentRow:true,
                menu:false,
                index:true,
                menuAlign:'center',
                column:[

                    {
                        label:"批次号",
                        prop:"batch_no"
                    },
                    {
                        label:"起始号",
                        prop:"begin_no"
                    },
                    {
                        label:"结束号",
                        prop:"end_no"
                    },
                    {
                        label:"数量",
                        prop:"counts"
                    },
                    {
                        label:"已用",
                        prop:"claim_counts"
                    },
                    {
                        label:"剩余",
                        prop:"used"
                    },
                    {
                        label:"当前票号",
                        prop:"status"
                    },
                    {
                        label:"领用人",
                        prop:"create_user"
                    },
                    {
                        label:"票据类型",
                        prop:"type"
                    },
                    {
                        label:"制作人",
                        prop:"update_user"
                    },
                    {
                        label:"操作时间",
                        prop:"update_time"
                    },
                ]
            }
        },
        addWin:false,
        addForm:{},
        addOption:{
            dicData:DIC,
            column:[
                {
                    label:"批次号",
                    prop:"piCiNum",
                    span:12
                },
                {
                    label:"票数合计",
                    prop:"ticCount",
                    span:12
                },
                {
                    label:"起始号",
                    prop:"begin",
                    span:12
                },
                {
                    label:"结束号",
                    prop:"end",
                    span:12
                },
                {
                    label:"票据类型",
                    prop:"ticType",
                    type:"select",
                    dicData:"ticketTypeList",
                    span:12
                },
                {
                    label:"所属用户",
                    prop:"user",
                    type:"select",
                    dicData:"shuUser",
                    span:12
                },
            ]
        },
        ungetList:{
            page: {
                pageSizes: [10],
                total: 20,
                currentPage: 1,
                pageSize: 10,
            },
            data:[],
            option:{
                menu:false,
                page:true,
                index:true,
                column:[
                    {
                       label:"起始号",
                       prop:"begin_no" 
                    },
                    {
                       label:"结束号",
                       prop:"end_no" 
                    },
                    {
                       label:"数量",
                       prop:"counts" 
                    },
                    {
                       label:"状态",
                       prop:"status" 
                    },
                    {
                       label:"票据类型",
                       prop:"type" 
                    },
                ]
            }
        }
    };
  },
  methods: {
      getTicketType(){
          this.postRequest("/fin/bill/billtype").then(data=>{
              for(var item of data.data){
                  this.ticketTypeList.push({
                      label:item.key,
                      value:item.value
                  });
              }
          })
      },
      tickRow(val){
          this.ticGetTable.page.currentPage=val;
          this.getTicTable();
      },
      getTicTable(){
          this.postRequest("/fin/bill/store/claim/list",{
              rows:10,
              page:this.ticGetTable.page.currentPage
          }).then(data=>{
              this.ticGetTable.page.total=data.data.totalRow;
              this.ticGetTable.data=data.data.list;
          });
      },
      tickRowII(val){
          this.ticUseTable.page.currentPage=val;
          this.getUseTable();
      },
      getUseTable(){
          this.postRequest("/fin/bill/store/list",{
              rows:2,
              page:this.ticUseTable.page.currentPage
          }).then(data=>{
              this.ticUseTable.page.total=data.data.totalRow;
              this.ticUseTable.data=data.data.list
          });
      },
      getUngetList(){
          this.postRequest("/fin/bill/store/list",{
              rows:10,
              page:this.ungetList.page.currentPage
          }).then(data=>{
              this.ungetList.page.total=data.data.totalRow;
              this.ungetList.data=data.data.list;
          })
      },
      refresh(){
          this.getTicTable();
      },
      refreshII(){
          this.getUseTable();
      },
      addShow(){
          this.addWin=true;
      },
      outKu(){
          this.postRequest("/fin/bill/store/claim/del",{
              id:this.currentRow.id
          }).then(data=>{
              if(data.data[0]==0){
                  this.$message({
                    message: data.data[1],
                    type: 'success'
                    });
                this.getUseTable();
              }else{
                  this.$message.error(data.data[1]);
              }
          });
      },
      inKu(item){
          this.getRequest("/fin/bill/store/add?billScope.id=&billScope.batch_no="+item.piCiNum+"&billScope.begin_no="+item.begin+"&billScope.end_no="+item.end+"&billScope.counts="+item.ticCount+"&billScope.type="+item.ticType).then(data=>{
              if(data.data[0]==0){
                  this.$message({
                    message: data.data[1],
                    type: 'success'
                    });
                this.getUseTable();
                this.addWin=false;
              }else{
                  this.$message.error(data.data[1]);
              }
          })
      },
      tickRoww(val){
          this.currentTicRow=val;
          this.postRequest("/fin/bill/store/claim/list",{
              filterRules:JSON.stringify([
                  {"field":"bill_scope_id","op":"eq","value":val.id}
              ]),
              rows:10,
              page:this.ticGetTable.page.currentPage
          }).then(data=>{
              this.ticGetTable.page.total=data.data.totalRow
              this.ticGetTable.data=data.data.list;
          })
          this.postRequest("/fin/bill/store/getStoreDetial",{
              isAll: false,
              bill_scope_id: val.id,
              filterRules:JSON.stringify([
                  {"field":"type","op":"eq","value":"客运车票"}
              ]),
              rows:10,
              page:this.ungetList.page.currentPage
          }).then(data=>{
              this.ungetList.page.total=data.data.totalRow
              this.ungetList.data=data.data.list;
          })
      },
      getShuUser(){
          this.postRequest("/sys/user/listWithSpell").then(data=>{  
              for(var item of data.data){
                  DIC.shuUser.push({
                      label:item.name,
                      value:item.id
                  });
                  this.shuUser.push({
                      value:item.name,
                      id:item.id
                  });
              }
          })
      },
      querySearch(queryString, cb) {
        var restaurants = this.shuUser;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      rowChange(val){
          this.currentRow=val;
      },
      closeModual(){
          this.addWin=false;
      }
  },
  computed: {},
  components:{FormData,TableData},
  watch: {},
  mounted() {
      console.log("票据领用");
      this.$emit("sendActive","1-2");
      this.getTicTable();
      this.getUseTable();
      this.getUngetList();
      this.getTicketType();
      this.getShuUser();
      DIC.ticketTypeList=this.ticketTypeList;
  }
};
</script>
<style scoped src="../../assets/css/financeManage/ticketGet.css">
</style>